<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
</head>
<body class="hold-transition skin-black sidebar-mini">
    <div th:replace="common/fragment :: link"></div>
    <div class="wrapper">
        <div th:replace="common/fragment :: navbar"></div>
        <div th:replace="common/fragment :: menu"></div>
        <div class="content-wrapper">
            <section class="content-header">
                <h1>员工编辑</h1>
            </section>
            <section class="content">
                <div class="box">
                    <form class="form-horizontal" action="/employee/saveOrUpdate" method="post" id="editForm" >
                        <input type="hidden" name="id" id="id" th:value="${employee?.id}">
                        <div class="form-group" style="margin-top: 10px;" th:if="${employee?.id==null}">
                            <label class="col-sm-2 control-label" >用户名：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="username" th:value="${employee?.username}" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 10px;" >
                            <label class="col-sm-2 control-label" >真实姓名：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="name"  th:disabled="${employee?.id!=null}"th:value="${employee?.name}"placeholder="请输入真实姓名">
                            </div>
                        </div>
                        <div class="form-group" th:if="${employee?.id==null}">
                            <label for="password" class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="password" th:value="${employee?.password}"name="password" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group" th:if="${employee?.id==null}">
                            <label for="repassword" class="col-sm-2 control-label">验证密码：</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="repassword" name="repassword" placeholder="再输入一遍密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">电子邮箱：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="email" name="email"th:value="${employee?.email}" placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="age" class="col-sm-2 control-label">年龄：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="age" name="age" th:value="${employee?.age}"placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dept" class="col-sm-2 control-label">部门：</label>
                            <div class="col-sm-6">
                                <select class="form-control" id="dept" name="dept.id">
                                    <option value="">请选择</option>
                                    <option
                                            th:each="department,stat:${departments}"
                                            th:value="${department?.id}"
                                            th:text="${department?.name}"
                                            th:selected="${department?.id == employee?.dept?.id}"
                                    ></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="adminDiv">
                            <label for="admin" class="col-sm-2 control-label">超级管理员：</label>
                            <div class="col-sm-6" style="margin-left: 15px;">
                                <input type="checkbox" id="admin" name="admin" class="checkbox" value="1" th:checked="${employee?.admin}" >
                            </div>
                        </div>
<!--                        <div class="form-group" id="roleDiv">-->
<!--                            <label for="role" class="col-sm-2 control-label">分配角色：</label><br/>-->
<!--                            <div class="row" style="margin-top: 10px">-->
<!--                                <div class="col-sm-2 col-sm-offset-2">-->
<!--                                    <select multiple class="form-control allRoles" id="role" style="height: 350px;" size="15">-->
<!--                                        <option th:each="role,stat:${roles}"-->
<!--                                                th:text="${role?.name}"-->
<!--                                                th:value="${role?.id}">-->
<!--                                        </option>-->
<!--                                    </select>-->
<!--                                </div>-->
<!--                                <div class="col-sm-1" style="margin-top: 60px;" align="center">-->
<!--                                    <div>-->

<!--                                        <a type="button" class="btn btn-primary  " style="margin-top: 10px" title="右移动"-->
<!--                                           onclick="moveSelected('allRoles', 'selfRoles')">-->
<!--                                            <span class="glyphicon glyphicon-menu-right"></span>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                    <div>-->
<!--                                        <a type="button" class="btn btn-primary " style="margin-top: 10px" title="左移动"-->
<!--                                           onclick="moveSelected('selfRoles', 'allRoles')">-->
<!--                                            <span class="glyphicon glyphicon-menu-left"></span>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                    <div>-->
<!--                                        <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全右移动"-->
<!--                                           onclick="moveAll('allRoles', 'selfRoles')">-->
<!--                                            <span class="glyphicon glyphicon-forward"></span>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                    <div>-->
<!--                                        <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全左移动"-->
<!--                                           onclick="moveAll('selfRoles', 'allRoles')">-->
<!--                                            <span class="glyphicon glyphicon-backward"></span>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="col-sm-2">-->
<!--                                    <select multiple class="form-control selfRoles" style="height: 350px;" size="15" name="roleIds">-->
<!--                                        <option-->
<!--                                                th:each="rolesById:${rolesByIds}"-->
<!--                                                th:text="${rolesById?.name}"-->
<!--                                                th:value="${rolesById?.id}"-->
<!--                                        ></option>-->
<!--                                    </select>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-6">
                                <button type="submit" class="btn btn-primary btn-submit">保存</button>
                                <a href="javascript:window.history.back()" class="btn btn-danger">取消</a>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <div th:replace="common/fragment :: footer"></div>
    </div>
<script>
    function moveAll(selfRoles, allRoles){
        $("."+allRoles).append($("."+selfRoles+"> option"))
    }
    function moveSelected(selfRoles, allRoles){
        $("."+allRoles).append($("."+selfRoles+"> option:selected"))
    }
    var arr=[]
    $(".selfRoles >option").each(function (index,domEle){
        arr.push($(domEle).val())
    })
    $(".allRoles>option").each(function (index,domEle){
      if ($.inArray($(domEle).val(),arr)>=0){
          $(domEle).remove();
      }
    })
    //进入页面判断是否是超级管理员
    if ($("#admin").prop("checked")){
        $("#roleDiv").addClass("hidden")
    }else {
        $("#roleDiv").removeClass("hidden")
    }
    $("#admin").click(function (){
        if ($("#admin").prop("checked")){
            $("#roleDiv").addClass("hidden")
        }else {
            $("#roleDiv").removeClass("hidden")
        }
    })


</script>
    <script>
        $("#editForm").bootstrapValidator({
        feedbackIcons: { // 图标
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
        fields:{ // 配置要验证的字段
        username:{
        validators:{ // 验证的规则
        notEmpty:{ // 不能为空
        message:"用户名必填" // 错误时的提示信息
    },
        stringLength: { // 字符串的长度范围
        min: 2,
        max: 10,
        message:"用户名长度为 2~10 位"
    },
        regexp: {
        regexp: /^[a-zA-Z0-9_\.]+$/,
        message: '只能使用英文数字_.'
    }
            // ,
            // remote:{
            //     type:"POST",
            //     url:"/employee/checkUsername",
            //     message:"用户名已存在"
            // }
    }
    },
        name:{
        validators:{ // 验证的规则
        notEmpty:{ // 不能为空
        message:"姓名必填" // 错误时的提示信息
    },
        stringLength: { // 字符串的长度范围
        min: 2,
        max: 6,
        message:"真实姓名长度为 2~6 位"
    }
    }
    },
        password:{
        validators:{
        notEmpty:{ // 不能为空
        message:"密码必填" // 错误时的提示信息
    },
        different: {
        field: 'username',
        message: '账号与密码不能相同'
    }
    }
    },
        repassword:{
        validators:{
        notEmpty:{ // 不能为空
        message:"密码必填" // 错误时的提示信息
    },
        identical: {// 两个字段的值必须相同
        field: 'password',
        message: '两次输入的密码必须相同'
    },
    }
    },
        email: {
        validators: {
        emailAddress: {} // 邮箱格式
    }
    },
        age:{
        validators: {
        between: { // 数字的范围
        min: 18,
        max: 60,
        message:"年龄范围为 18~60 岁"
    }
    }
    }
    }
    }).on('success.form.bv', function(e) {
        // 表单的提交按钮必须为 submit 才可以执行到这里
        // 阻止表单提交
        e.preventDefault();
        $('.selfRoles > option').prop('selected', 'true');
        // TODO 这里可以改成用异步的方式提交表单
        $.post(
        "/employee/saveOrUpdate",
        $("#editForm").serialize(),
        function (result) {
        console.log(result)
        if(result.success){
        window.location.href = "/employee/list";   // 请求服务器查询所有方法.
    } else {
        Swal.fire({
        title: result.msg,
        icon: "error",
    })
    }
    }
        )
    });
</script>

</body>
</html>